<template>
  <div class="app">
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="person.age += 1">修改年龄</button>
    <hr>
    <h2>{{ car2 }}</h2>
    <button @click="car2.price += 10">点我价格+10</button>
  </div>
</template>

<script lang="ts" setup name="App">
import { reactive, toRaw, markRaw } from "vue";
import mockjs from 'mockjs'
/* toRaw */
let person = reactive({
  name: 'tony',
  age: 18
})
// 用于获取一个响应式对象的原始对象
let rawPerson = toRaw(person)
console.log('响应式对象', person)
console.log('原始对象', rawPerson)
/* markRaw */
let car = markRaw({ brand: '奔驰', price: 100 })
let car2 = reactive(car)

console.log(car)
console.log(car2)

let mockJs = markRaw(mockjs)
console.log("mockJs=>",mockJs)
/* ****************** */
/*
### `toRaw`
1. 作用：用于获取一个响应式对象的原始对象， `toRaw` 返回的对象不再是响应式的，不会触发视图更新。
   官网描述：这是一个可以用于临时读取而不引起代理访问/跟踪开销，或是写入而不触发更改的特殊方法。不建议保存对原始对象的持久引用，请谨慎使用。
   何时使用？ —— 在需要将响应式对象传递给非 `Vue` 的库或外部系统时，使用 `toRaw` 可以确保它们收到的是普通对象

### `markRaw`
1. 作用：标记一个对象，使其**永远不会**变成响应式的。
   例如使用`mockjs`时，为了防止误把`mockjs`变为响应式对象，可以使用 `markRaw` 去标记`mockjs`
*/
/* markRaw */
let citys = markRaw([
  {id:'asdda01',name:'北京'},
  {id:'asdda02',name:'上海'},
  {id:'asdda03',name:'天津'},
  {id:'asdda04',name:'重庆'}
])
// 根据原始对象citys去创建响应式对象citys2 —— 创建失败，因为citys被markRaw标记了
let citys2 = reactive(citys)
console.log('citys2=>',citys2)
</script>


<style scoped>
.app {
  background-color: #ddd;
  border-radius: 10px;
  box-shadow: 0 0 10px;
  padding: 10px;
}

button {
  margin: 0 5px;
}
</style>